<template>
	<view class="video-info">
		<!-- 视频信息区域 -->
		<view class="main-info">
			<view class="title-section">
				<text class="video-title">{{ videoInfo.title }}</text>
			</view>

			<view class="stats-row">
				<view class="video-stats">
					<text class="duration" v-if="videoInfo.duration">{{ formattedDuration }}</text>
					<text class="date">{{ formatDate(videoInfo.createTime) }}</text>
				</view>
				<text class="course-type" :class="{ 'free': course.paymentRules === 0 }">
					{{ course.paymentRules === 0 ? '免费' : '付费' }}
				</text>
			</view>
		</view>

		<!-- 广告区域 -->
		<view class="advertisement-section" v-if="bannerList.length > 0">
			<view class="section-header">
				<text class="section-title">推荐商家</text>
				<text class="section-subtitle">为您精选优质商家</text>
			</view>

			<view class="ad-container">
				<view v-for="(banner, index) in bannerList" :key="index" class="ad-card"
					@tap="handleBannerClick(banner)">
					<view class="ad-image">
						<image :src="banner.imageUrl" mode="aspectFill" />
					</view>
					<view class="ad-content">
						<text class="ad-title">{{ banner.title }}</text>
						<text class="ad-desc">{{ banner.description }}</text>
						<text class="merchant-name">{{ banner.merchantName }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VideoInfo',
		data() {
			return {
				bannerList: [],
				loading: false,
				error: null
			}
		},
		props: {
			videoInfo: {
				type: Object,
				required: true
			},
			course: {
				type: Object,
				required: true
			},
		},
		methods: {
			formatDate(date) {
				if (!date) return '';
				const d = new Date(date);
				const year = d.getFullYear();
				const month = String(d.getMonth() + 1).padStart(2, '0');
				const day = String(d.getDate()).padStart(2, '0');
				return `${year}年${month}月${day}日`;
			},
			async fetchAdvertisements() {
				if (this.loading || !this.course.id) return;

				try {
					this.loading = true;
					const data = await this.$http.get(`/advertisement/by/course?courseId=${this.course.id}`);

					if (data && data.items) {
						this.bannerList = data.items.map(item => ({
							...item,
							imageUrl: item.image || item.imageUrl
						}));
					}
				} catch (error) {
					console.error('获取广告失败:', error);
					this.error = '获取广告信息失败';
				} finally {
					this.loading = false;
				}
			},
			handleBannerClick(banner) {
				if (!banner.linkUrl) return;

				// 使用内置浏览器打开链接
				uni.navigateTo({
					url: `/pages/webview/index?url=${encodeURIComponent(banner.linkUrl)}&title=${encodeURIComponent(banner.title)}`
				});
			}
		},
		computed: {
			formattedDuration() {
				if (!this.videoInfo.duration) return '';
				const seconds = parseInt(this.videoInfo.duration);
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
			},
			parseTags() {
				return this.course.tags ? this.course.tags.split(',').filter(tag => tag.trim()) : [];
			}
		},
		mounted() {
			this.fetchAdvertisements();
		},
		watch: {
			'course.id': {
				handler(newVal) {
					if (newVal) {
						this.fetchAdvertisements();
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'VideoInfo.scss';
</style>